<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
		<link rel="stylesheet" href="./lib/bootstrap.css" />
	</head>
	<body>
		<div id="app">
			<input type="button" value="获取元素" @click="getElement" />
			
			<h3 id="myh3" ref="myh3">哈啊哈哈哈哈</h3>
			<hr />
			<h3> 组件的引用</h3>
			<login ref="getlogin"></login>
			
		</div>
		<script>
			var login={
				data(){
					return {
						msg:'就看见空间'
					}
				},
				template:'<h3>我是一个登录组件</h3>',
				methods:{
					show(){
						console.log("我是show方法")
					}
				}
			}
			var vm = new Vue({
				el: '#app',
				data: {
				},
				methods: {
					getElement(){
						console.log(document.getElementById('myh3').innerText)
						console.log(this.$refs.myh3.innerText)
						console.log(this.$refs.getlogin.msg)
						this.$refs.getlogin.show()
					}
				},
				components:{
					login
				}
			})
		</script>
	</body>
</html>
